和 Android 中的 Spinner 不一样,Flutter 中的下拉菜单其实是按钮中的一种形式,从命名上就可以看出来:DropdownButton
。
先看源码:
DropdownButton({
Key key,
@required this.items,
this.value,
this.hint,
this.disabledHint,
@required this.onChanged,
this.elevation = 8,
this.style,
this.underline,
this.icon,
this.iconDisabledColor,
this.iconEnabledColor,
this.iconSize = 24.0,
this.isDense = false,
this.isExpanded = false,
})
items
下拉选项,
List<DropdownMenuItem<T>>
类型的。value
选定的值。
hint
下拉菜单显示的占位符,是
Widget
类型的。disabledHint
禁用下拉菜单时,显示的占位符,
Widget
类型的。onChanged
用户选择选项时调用:
- 当该属性为 null 时,下拉按钮将被禁用,箭头变成灰色,并且不再响应用户的点击,并且显示
hint
或者disabledHint
设置的内容,如果二者均设置,会优先显示disabledHint
。
- 当该属性为 null 时,下拉按钮将被禁用,箭头变成灰色,并且不再响应用户的点击,并且显示
elevation
打开菜单时放置菜单的Z坐标,通俗的讲究是 Item 展开时的阴影。
有以下值可选:1、2、3、4、6、8、9、12、16 和 24。
默认值为 8,是下拉按钮的适当标高。
style
下拉按钮和点击该按钮时出现的下拉菜单中的文本的文本样式。
underline
用于装饰下拉菜单的下划线,如果不设置,则显示高度为 1.0 的默认下划线样式,如果不想要下划线,则需要将其 高度设置为 0。
//不显示下划线 underline: Container(height: 0, color: Colors.red),
icon
设置下拉菜单右侧的图标
icon: Icon( Icons.airplay, size: 20, ),
iconDisabledColor
如果设置了 Icon,并且该下拉菜单无效(onChanged 为 null 或者 items 为 null)时,Icon 显示的颜色。
iconEnabledColor
右侧如表(或者向下箭头)的颜色
iconSize
设置 Icon 的大小(如果 Icon 单独设置了,以 Icon 设置的为准)
isDense
用来调整按钮高度,
true
时将按钮高度缩小,缩小的高度通过Theme _kDenseButtonHeight
决定,但不会缩小太多导致图标剪切;isExpanded
用于是否填充按钮宽度到父控件,
true
为填充,false
为默认不填充
一个简单的示例:
class _SwitchAndCheckBoxTestRouteState
extends State<SwitchAndCheckBoxTestRoute> {
List<DropdownMenuItem> getItems() {
List<DropdownMenuItem> items = new List();
for (int i = 0; i < 10; i++) {
items.add(DropdownMenuItem(
value: "${i}",
child: Text("item ${i}"),
));
}
return items;
}
var itemValue;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("下拉菜单"),
),
body: Container(
alignment: Alignment.center,
child: DropdownButton(
hint: Text("请选择"),
items: getItems(),
value: itemValue,
elevation: 1,
icon: Icon(
Icons.airplay,
size: 20,
),
onChanged: (T) {
//下拉菜单item点击之后的回调
setState(() {
itemValue = T;
});
},
),
),
);
}
}
效果如下: